<template>
  <div class="register-wrap">
      <img class="avatar" src="../../images/avatar.png" alt="">
      <div class="input-item box box-align-center">
          <div class="icon"></div>
          <input v-model="userName" maxlength="20" type="text" placeholder="请输入昵称">
      </div>
      <div class="input-item box box-align-center">
          <div class="icon"></div>
          <input v-model="mobile" type="number" maxlength="20" placeholder="请输入手机号">
      </div>
      <div class="input-item code box box-align-center">
          <div class="icon"></div>
          <input v-model="code" type="text" maxlength="20" placeholder="请输入验证码">
          <div @click="getCode" class="send-code">{{codeMsg}}</div>
      </div>
     <div class="input-item box box-align-center">
          <div class="icon"></div>
          <input v-model="pwd" type="password" maxlength="20" placeholder="请输入密码">
      </div>
      <div class="btn" @click="login">注册</div>
  </div>
</template>

<script>
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");
export default {
  components: {
      
  },
  data () {
    return {
        mobile:'',
        pwd:'',
        code:'',
        codeMsg:'获取',
        userName:''
    }
  },
  mounted(){
   
  },
  methods:{
     linkTo(link){
        this.$router.push(link)
        
      },
     getCode(){
        if (!this.mobile) {
            this.$vux.toast.show({
                text: '手机号不能为空',
                    type:'cancel'
            })
            return;
        }
        if (!(/^1[34578]\d{9}$/.test(this.mobile))) {
            this.$vux.toast.show({
                text: '手机号格式不对',
                    type:'cancel'
            })
            return;
        }
            if (this.codeMsg != '获取') {
                return;
            }
            let time = 60;
            this.getCodeNum()
            setInterval(() => {
            if (time <= 1) {
                this.codeMsg = '获取'
                return;
            }
            this.codeMsg =time-- + 's'
            }, 1000)
 
    },
    async getCodeNum(){
        const json = await this.$https.fetchPost(this.$api.sendRegisterCode+"?mobile="+this.mobile, {})
        if (json.data.code == 10000) {
            this.$vux.toast.show({
                text: "验证码获取成功"
            })
        }
    },
    async login(){
        if (!this.userName) {
            this.$vux.toast.show({
                text: '昵称不能为空',
                type:'cancel'
            })
            return;
        }
        if (!this.mobile) {
            this.$vux.toast.show({
                text: '手机号不能为空',
                    type:'cancel'
            })
            return;
        }
        if (!(/^1[34578]\d{9}$/.test(this.mobile))) {
            this.$vux.toast.show({
                text: '手机号格式不对',
                    type:'cancel'
            })
            return;
        }
        if (!this.pwd) {
            this.$vux.toast.show({
                text: '密码不能为空',
                type:'cancel'
            })
            return;
        }
        if (!this.code) {
            this.$vux.toast.show({
                text: '验证码不能为空',
                type:'cancel'
            })
            return;
        }
        let  url = this.$api.register,
            param = {
                mobile:this.mobile,
                password:this.pwd,
                code:this.code,
                nickName:this.userName,
            }
        const json = await this.$https.fetchPost(url, param);
        if(json.data.code == 10000) {
            common.setCookie("mobile", this.mobile);
            common.setCookie("password", this.pwd);
            common.setCookie("sessionId", json.data.data);
            this.$router.replace('/')
        }     
      }
  }
}
</script>

<style lang="scss">
    .register-wrap{
        width: 100%;
        height: 11.5rem;
        background-color: #000120;
        padding-top: .6rem;
        .avatar{
            width: 2.26rem;
            height: 2.26rem;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            margin: 0 auto .88rem;
            display: block;
        }
        .input-item{
            width: 5.7rem;
            height: .88rem;
            margin: 0 auto .32rem;
            background-color: #171834;
            border-radius: .44rem;
            -webkit-border-radius: .44rem;
            &.code{
                input{
                    width: 3.3rem;
                }
                .send-code{
                    font-size: .28rem;
                    color: #198AE7;
                    text-align: center;
                    width: 1rem;
                    height: .88rem;
                    line-height: .88rem;
                }
            }
            .icon{
                background-image: url(../../images/user.png);
                background-size: 100%;
                width: .34rem;
                height: .36rem;
                margin: 0 .27rem 0 .57rem;
            }
            &:nth-child(3){
                .icon{
                    background-image: url(../../images/mobile.png);
                    width: .28rem;
                    height: .44rem;
                    margin: 0 .3rem 0 .6rem;
                }   
            }
            &:nth-child(4){
                .icon{
                    background-image: url(../../images/code.png);
                    width: .34rem;
                    height: .38rem;
                    margin: 0 .27rem 0 .57rem;
                }   
            }
            &:nth-child(5){
                .icon{
                    background-image: url(../../images/password.png);
                    width: .3rem;
                    height: .36rem;
                    margin: 0 .29rem 0 .59rem;
                }   
            }
            input{
                height: .88rem;
                background-color: #171834;
                 border: 0;
                 font-size: .32rem;
                 color: #999;
                &:focus{
                    outline: 0;
                   
                }
            }
        }
        .btn{
            width: 5.7rem;
            height: .88rem;
            line-height: .88rem;
            text-align: center;
            margin: .84rem auto 0;
            background-color: #198AE7;
            color: #fff;
            font-size: .32rem;
            border-radius: .44rem;
            -webkit-border-radius: .44rem;
        }
        .forget{
            color: #D2D1D1;
            font-size: .28rem;
            text-align: center;
            margin-top: .29rem;
        }
    }
</style>
